<template>
  <!-- 首页 -->
  <van-nav-bar title="首页" />
  <!-- 搜索 -->
  <van-search
    v-model="value"
    shape="round"
    placeholder="请输入搜索关键词"
    @click="sousuo"
  />
  <!-- 轮播 -->
  <van-swipe :autoplay="1000" lazy-render>
    <van-swipe-item v-for="image in images" :key="image">
      <img :src="image" style="width: 100%; height: 150px" />
    </van-swipe-item>
  </van-swipe>
  <!-- 宫格 -->
  <van-grid :column-num="4">
    <van-grid-item
      v-for="value in 8"
      :key="value"
      icon="photo-o"
      text="导航分类"
    />
  </van-grid>
  <!-- 列表 -->
  <van-card
    num="2"
    price="2.00"
    desc="描述信息"
    title="商品标题"
    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
  />
  <van-card
    num="2"
    price="2.00"
    desc="描述信息"
    title="商品标题"
    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
  />
  <van-card
    num="2"
    price="2.00"
    desc="描述信息"
    title="商品标题"
    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
  />
  <van-card
    num="2"
    price="2.00"
    desc="描述信息"
    title="商品标题"
    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
  />
  <van-card
    num="2"
    price="2.00"
    desc="描述信息"
    title="商品标题"
    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
  />
</template>

<script setup>
//轮播
const images = [
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg",
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg",
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg",
];
import { useRouter } from "vue-router";
import { ref } from "vue";
let router = new useRouter();
let value=ref("")
let sousuo=()=>{
    router.push('/sousuo')
}
</script>

<style lang="scss" scoped>
</style>